<template>
    <el-form inline="true">
      <el-form-item>
        <Selector v-model="params.difficulty"   placeholder="请选择题目难度" style="width: 200px;"></Selector>
      </el-form-item>
      <el-form-item>
        <el-input v-model="params.title" placeholder="请您输入要搜索的题目标题"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button plain @click="onSearch">搜索</el-button>
        <el-button plain @click="onReset" type="info">重置</el-button>
        <el-button plain type="primary" :icon="Plus" @click="onAddQuestion">添加题目</el-button>
      </el-form-item>
    </el-form>
    <el-table height="526px" :data="questionList">
      <el-table-column prop="questionId" width="180px" label="题目id"></el-table-column>
      <el-table-column prop="title" label="题目标题"></el-table-column>
      <el-table-column prop="difficulty" label="题目难度" width="90px">
        <template #default="{ row }">
          <div v-if="row.difficulty === 1" style="color:#3EC8FF;">简单</div>
          <div v-if="row.difficulty === 2" style="color:#FE7909;">中等</div>
          <div v-if="row.difficulty === 3" style="color:#FD4C40;">困难</div>
        </template>
      </el-table-column>
      <el-table-column prop="createName" label="创建人" width="140px" />
      <el-table-column prop="createTime" label="创建时间" width="180px" />
      <el-table-column label="操作" width="100px" fixed="right">
        <template #default="{ row }">
          <el-button type="text" @click="onEdit(row.questionId)">编辑</el-button>
          <el-button type="text" class="red" @click="onDelete(row.questionId)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination background  size="small" layout="total, sizes, prev, pager, next, jumper" :total="total"
     v-model:current-page="params.pageNum" v-model:page-size="params.pageSize"
      :page-sizes="[5, 10, 15, 20]" @size-change="handleSizeChange" @current-change="handleCurrentChange"/>

      <question-drawer ref="questionDrawerRef" @success="onSuccess"></question-drawer>
  </template>

<script setup>
import { Plus } from "@element-plus/icons-vue"
import Selector from "@/components/QuestionSelector.vue"
import { reactive, ref } from "vue";
import { getQuestionListService,delQuestionService } from "@/apis/question";
import QuestionDrawer from "@/components/QuestionDrawer.vue";

const params = reactive({
    pageNum: 1,
    pageSize: 10,
    difficulty:'',
    title:''
})


const questionList = ref([])
const total = ref(0)
async function getQuestionList() {
  const result = await getQuestionListService(params);
  console.log(result)
  questionList.value = result.rows
  total.value = result.total
}
getQuestionList();

function handleSizeChange(newSize){
// params.pageSize=newSize
params.pageNum=1
getQuestionList()
}

function handleCurrentChange(newPage){
//params.pageNum=newPage
getQuestionList()
}

function onSearch(){
params.pageNum=1
getQuestionList()
}

function onReset(){
    params.pageNum=1
    params.pageSize=10
    params.title=''
    params.difficulty=''
    getQuestionList()
}
const questionDrawerRef =ref()

function onAddQuestion(){
    questionDrawerRef.value.open()
}

function onSuccess(service){
    if(service === 'add'){
        params.pageNum=1
    }
    
    getQuestionList()
}

async function onEdit(questionId){
    questionDrawerRef.value.open(questionId)
}

async function onDelete(questionId){
   await delQuestionService(questionId)
   params.pageNum=1
   getQuestionList()
}

</script>

<!-- <style lang="scss" scoped>
.index-question-table-box{
  :deep(.el-pagination){
    .el-select .el-select__wrapper,.el-input .el-input__wrapper{
      height: 24px;
    }
  }
  display: flex;
  max-width: 1520px;
  width: 100%;
  justify-content: space-between;
  .right{
    width: 340px;
    :deep(.top-box){
      width: 100%;
      height: 345px;
      padding-bottom: 20px;
      margin-bottom: 20px;
      border-radius: 16px;
      background: linear-gradient( 164deg, #E2F7FF 0%, #FFFFFF 50%);
      .el-calendar,.el-calendar__body{
        background: transparent;
      }
      .el-calendar{
        position: relative;
        .el-calendar__title{
          font-weight: bold;
        }
        .el-calendar__header{
          border: none;
          padding-bottom: 0;
        }
        .el-calendar__button-group{
          text-align: center;
          background: transparent;
          .el-button-group>.el-button{
            color: #1f2122;
            border: none;
            background: rgba(255,255,255,.1);
          }
        }
        .el-calendar-table{
          thead th{
            color: #32C5FF;
            font-size:12px;
            font-weight: bold;
          }
           td.is-today span{
            font-weight: bold;
          }
          background: transparent;
          .el-calendar-day{
            height: 40px;
            text-align: center;
          }
          td{
            border: none ;
          }
        }
      }
      
    }
    .bot-box{
      width: 340px;
      border-radius: 16px;
      padding-top: 0;
      box-sizing: border-box;
      background: #fff;
      position: relative;
      overflow: hidden;
      .title{
        font-weight: bold;
        color: #32C5FF;
        position: relative;
        width: 100%;
        height: 60px;
        padding: 20px;
        padding-bottom: 0;
        background: linear-gradient( 169deg, #E2F7FF 0%, #FFFFFF 100%);
        span{
          position: absolute;
          display: flex;
          right: 20px;
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 14px;
          color: #32C5FF;
          bottom: 20px;
          cursor: pointer;
        }
      }
      .hot-list{
        width: calc(100% - 40px);
        margin: 0 auto;
        padding-top: 20px;
        padding-bottom: 20px;
        .list-item{
          margin-bottom: 18px;
          cursor: pointer;
          display: flex;
          align-items: center;
          .index-box{
            display: inline-block;
            text-align: center;
            width: 20px;
            font-family: Tensentype-RuiHeiJ, Tensentype-RuiHeiJ;
            font-weight: normal;
            font-size: 18px;
            color: #999999;
            font-weight: bold;
          }
          .txt{
            max-width: calc(100% - 34px);
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            margin-left: 10px;
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 16px;
            color: #222222;
            line-height: 22px;
            text-align: left;
            font-style: normal;
          }
          &:hover{
            .txt{
              color: #32C5FF;
            }
          }
        }
      }
    }
  }
  :deep(.left){
    width: calc(100% - 360px);
    border: none;
    border-radius: 16px;
    overflow: hidden;
    background:linear-gradient(177deg, #f3fcff 0%, #FFFFFF 10%);
    .el-table {
      th.el-table__cell{
        background-color:rgba(50,197,255,0.08)  !important;
        font-size: 13px;
      }
      td{
        height: 54px;
      }
    }
    
    // .el-form{
    //   height: 60px;
    //   .blue{
    //     background: #32C5FF !important;
    //     color: #fff;
    //     font-size: 14px;
    //     height: 40px;
    //   }
    //   .info{
    //     background: #f2f3f5;
    //     color: #222;
    //     border-color: #f2f3f5;
    //     font-size: 14px;
    //     height: 40px;
    //   }
    // }
    .el-card__header{
      font-family: PingFangSC, PingFang SC;
      font-weight: 600;
      font-size: 20px;
      color: #222222;
      line-height: 28px;
      text-align: left;
      font-style: normal;
      border: none;
      padding-bottom: 0;
    }
  }
}


.el-input__wrapper{
  background-color: #F8F8F8;
}
.index-question {
  background-color: rgba(247, 247, 247, 1);
  display: flex;
  justify-content: center;
  margin-top: 20px;
  .no-border{
    border: none;
  }
  /* 水平居中 */
}

.el-table {
  th {
    word-break: break-word;
    background-color: #033e7c !important;
    color: #ffff;
    height: 40px;
    font-weight: 700;
    font-size: 14px;
  }
}
</style> -->